Création d’un écran

Un écran dans l’application est en fait simplement un composant. La librairie UI fournit un composant Screen qui permet de faire une base de l’écran. Il suffit ensuite de fournir l’ensemble du contenu de l’écran en tant qu’enfants.

Au niveau de l’architecture, afin de bien distinguer les écrans des composants standards, tous les écrans sont stockés dans un dossier screens qui peut ensuite être redivisé en fonction des fonctionnalités pour ajouter un peu d’ordre dans le dossier. Chaque dossier d’écrans doit contenir un fichier index afin de faciliter l’export.

La librairie core fournit un typage pour la structure des écrans avec les informations nécessaires à l’enregistrement dans la navigation des différents écrans. Un écran est définit par une clé puis différents attributs :

export interface Screen {
  component: React.FC<any>;
  title: string;
  options?: ScreenOptions;
}

interface ScreenOptions {
  shadedHeader: boolean;
}

• un titre (title) à afficher dans le header lorsque l’utilisateur se trouve sur la page. Il doit s’agir en réalité d’une clé de traduction afin de faciliter l’internationalisation de l’application.
• le composant correspondant au contenu de l’écran (component)
• des options pour l’affichage de l’écran comme par exemple la possibilité d’avoir ou non un header avec une ombre. Le header a par défaut une ombre, il n’est donc pas nécessaire de fournir cet attribut lorsque l’ombre est voulue.

Il suffit ensuite d’exporter tous les écrans sous cette forme :

import ContactListScreen from './ContactListScreen';
import ContactDetailsScreen from './ContactDetailsScreen';
import ContactFormScreen from './ContactFormScreen';

export default {
  ContactListScreen: {
    title: 'Crm_Contacts',
    component: ContactListScreen,
    options: {
      shadedHeader: false,
    },
  },
  ContactDetailsScreen: {
    title: 'Crm_Contact',
    component: ContactDetailsScreen,
    actionID: 'crm_contact_details',
    options: {
      shadedHeader: false,
    },
  },
  ContactFormScreen: {
    title: 'Crm_Contact',
    component: ContactFormScreen,
  },
};

⚠️ Attention, tous les écrans définis dans le module doivent être exportés sinon l’application ne sera pas capable d’y accéder.

Lors de la surcharge d’un écran, il suffit de venir créer un nouvel écran en modifiant les éléments à changer sur l’écran de base. Puis, une fois le composant créé, venir l’exporter avec la même clé que dans le module d’origine. Ainsi, lors de l’enregistrement dans la navigation, seul le dernier écran avec la même clé sera pris en compte.